import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import Slide, { SlideRef } from "@shared/slide";
import { useRef } from "react";
import UpdateAvatar from "@pages/personal/widgets/updateAvatar";
interface Props {
    // 头像地址
    avatar: string;
}

export default function Avatar(props: Props) {
    // 用户获取 Slide 组件实例对象
    const slideRef = useRef<SlideRef | null>(null);
    return (
        <li>
            <span>头像</span>
            <div className={styles.value} onClick={() => slideRef.current?.open()}>
                <div className={styles.avatar}>
                    <img src={props.avatar} alt="avatar" />
                </div>
                <GeekIcon type="iconbtn_right" className={styles.icon} />
            </div>
            <div className={styles.value} onClick={() => slideRef.current?.open()}></div>
            <Slide ref={slideRef} direction={"toTop"}>
                <UpdateAvatar slideRef={slideRef} />
            </Slide>
        </li>
    );
}